<template>
  <div class="loginBox">
    <div class="left">
      <div class="prompt">
        <p>Hi，您好</p>
        <p>欢迎使用</p>
        <p>智驾OTA管理系统</p>
      </div>
      <img class="cheImg" src="~@assets/welcomeche.png" alt="">
    </div>
    <div class="right">
      <div class="login">
        <p class="loginTitle">登录</p>
        <a-button
          class="loginBtn"
          size="large"
          type="primary"
          @click="handleLogin"
        >
          <a-icon type="safety-certificate" theme="filled"/>
          {{ '使用OA登录' }}
        </a-button>
        <p class="needHand" @click="handleHelp">需要帮助？</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Welcome',
  created() {
    let loginType = this.$route.query.loginType
    if (loginType === 'OA') {
      this.$router.replace({ path: '/user/login', query: this.$route.query })
    }
  },
  methods: {
    handleHelp () {
      this.$router.push({ path: '/user/helpinstructions' })
    },
    handleLogin () {
      this.$router.push({ path: '/user/login', query: this.$route.query })
    }
  }
}
</script>

<style lang="less" scoped>
  .container {
    /*width: 100%;*/
    /*height: 100%;*/
    /*position: relative;*/
    /*.desaysvLoginbg {*/
    /*  background: url(../../assets/welcomebg.png) center center no-repeat;*/
    /*  background-size: cover;*/
    /*}*/
    .loginBox {
      min-width: 940px;
      min-height: 460px;
      border-radius: 30px;
      position: absolute;
      top: 50%;
      left: 50%;
      box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.14);
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      .left {
        position: absolute;
        left: 0;
        top: 0;
        width: 470px;
        height: 460px;
        border-radius: 30px 0px 0px 30px;
        background-color: rgba(42, 78, 94, 1);
        color: rgba(16, 16, 16, 1);
        .prompt {
          margin: 20px 0 0 20px;
          color: rgba(255, 255, 255, 1);
          font-size: 24px;
          font-weight: 800;
          p {
          text-shadow:2px 3px 1px #000;
          }
        }
        .cheImg {
          position: absolute;
          bottom: 20px;
          left: -70px;
          width: 110%;
        }
      }
      .right {
      position: absolute;
      right: 0;
      top: 0;
      width: 470px;
      height: 460px;
      background: url(../../assets/welcomebg2.png) center center no-repeat;
      background-size: cover;
      border-radius: 0px 30px 30px 0px;
      background-color: rgba(229, 229, 229, 1);
      .login {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        height: 50%;
        .loginTitle {
        margin: 0 auto;
        width: 20%;
        color: rgba(51, 51, 51, 1);
        font-weight: 800;
        font-size: 20px;
        text-align: center;
        border-bottom: 2px solid rgba(20, 112, 146, 1);
        }
        .loginBtn {
          position: absolute;
          left: 0;
          right: 0;
          top: 65px;
          margin: auto;
          width: 80%;
          height: 40px;
          border-radius: 20px;
        }
        .needHand {
          width: 100%;
          text-align: center;
          color: rgba(142, 142, 142, 1);
          font-size: 12px;
          margin-top: 90px;
          cursor:pointer;
        }
      }
      }
    }
      .loginPageFooter {
        border: none;
    }
  }
</style>
